<?php
@session_start();
if (!empty($_SESSION['usuario'])) {
    
include_once '../../Model/M_Pedido_Grupo_Mesa.php';
include_once '../../Model/M_Rubro.php';
include_once '../../Model/M_SubRubro.php';

$rubro = new M_Rubro();
$lista = $rubro->searchRubro_All();

$idPedido = $_REQUEST['idPedido'];
//Pedido Grupo Mesa
$pedGrMe = new M_Pedido_Grupo_Mesa();
$pedGrMe->setIdPedido($idPedido);
$listaPedGruMes = $pedGrMe->searchPedidoMesas();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .capaPrincipal{
                width: 100%;
                height: 100%;
            }
            .capaIzquierda{
                float: left;
                height: 100%;
                width: 500px;
                font-weight: bold;
            }
            .capaDerecha{
                float: right;
                height: 100%;
                width: -moz-calc(100% - 500px); 
                width: -webkit-calc(100% - 500px); 
                width: calc(100% - 500px);
                font-weight: bold;
            }
            .capaIzquierdaTop{
                height: -moz-calc(50% - (3px)*2); 
                height: -webkit-calc(50% - (3px)*2); 
                height: calc(50% - (3px)*2);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
                
            }
            .capaIzquierdaBottom{
                height: -moz-calc(50% - (3px)*2); 
                height: -webkit-calc(50% - (3px)*2); 
                height: calc(50% - (3px)*2);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
                overflow: auto;
            }
            .capaDerechaTop{
                height: -moz-calc(100% - (150px + (6px)*2)); 
                height: -webkit-calc(100% - (150px + (6px)*2)); 
                height: calc(100% - (150px + (6px)*2)); 
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
                overflow: auto;
            }
            .capaDerechaBottom{ 
                height: 150px;
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
            }
            .tituloDetallePedido{
                font-size: 26px;
                font-weight: bolder;
                padding: 10px;
                text-shadow: 5px 5px 5px #aaa;
                font-family: sans-serif;
            }
            .cuerpoDetallePedido{
                padding: 10px;
            }
            .tableDetallePedido{
                border: 4px solid #A8A8A8;
                border-collapse: collapse;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
            }
            .tableHead{
                background: #ffffff;
                background: -moz-linear-gradient(-45deg,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
                background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
                background: -o-linear-gradient(-45deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
                background: -ms-linear-gradient(-45deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
                background: linear-gradient(135deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 );
                font-size: 20px;
                text-align: center;
                text-shadow: 3px 3px 3px #aaa;
                display: block;

            }
            .tableBody{
                background: #ffffff;
                background: -moz-linear-gradient(-45deg,  #ffffff 0%, #f3f3f3 50%, #ededed 88%, #ffffff 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(88%,#ededed), color-stop(100%,#ffffff));
                background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
                background: -o-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
                background: -ms-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
                background: linear-gradient(135deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
                font-size: 14px;
                text-align: center;
                display: block; /*obligado*/ 
                height: 244px; /*la que necesites*/ 
                overflow: auto; /*obligado*/ 
                width: 100%;
            }
            .subRubro{
                float: left;
                padding: 10px;
                margin: 4px;
                border: 4px solid #A8A8A8;
                border-collapse: collapse;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                background: #f3e2c7;
                background: -moz-linear-gradient(-45deg,  #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
                background: -webkit-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: -o-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: -ms-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: linear-gradient(135deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );
                width: calc(100% / 3);
            }
            .subRubro:hover{
                float: left;
                padding: 10px;
                margin: 4px;
                border: 4px solid #A8A8A8;
                border-collapse: collapse;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                background: #f2825b;
                background: -moz-linear-gradient(-45deg,  #f2825b 0%, #e55b2b 50%, #f07146 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2825b), color-stop(50%,#e55b2b), color-stop(100%,#f07146));
                background: -webkit-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: -o-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: -ms-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: linear-gradient(135deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=1 );
            }
            .subRubroTitulo{
                text-align: center;
                border: 4px solid #A8A8A8;
                width: 90px;
            }
            .subRubroNombre{
                text-align: center;
                font-size: 12px;
                text-shadow: 3px 3px 3px #aaa;
                text-decoration: none;
                color: black;
            }
            .capaDerechaBottomLeft{
                float: left;
                width: calc(100% - (250px + 12px));
                height: calc(100% - 4px);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
            }
            .capaDerechaBottomRight{
                float: left;
                width: 250px;
                height: calc(100% - 4px);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                border: 3px solid #A8A8A8;
            }
            .horaEntrada{
                float: left;
                width: 50%;
                
            }
            .tiempoTranscurrido{
                float: right;
                width: 50%;
            }
            .mesasInvolucradas{
                float: right;
                width: 50%;
            }
            .numeroCubiertos{
                float: right;
                width: 50%;
            }
            .division1{
                height: calc(100%/3);
            }
            .division2{
                height: calc(100%/3);
            }
            .division3{
                height: calc(100%/3);
            }
            .montoTotal{
                height: 100%;
                vertical-align: middle;
                font-size: 20px;
                font-family: sans-serif;
                top: 20px;
            }
            .rightImagen{
                float: left;
                width: 30%;
                height: 100%
            }
            .leftDescripcion{
                float: left;
                width: 70%;
                height: 45px;
                text-align: left;
            }
        </style>
        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>
        <script>
            function eligeFuncionalidad(id){
                var elemento = document.getElementById(id);
                if(elemento.className=="mesaOcupada"){
                    location.href='V_Pantalla_Principal.php';
                }else if(elemento.className=="mesaJuntando"){
                    elemento.className = "mesa";
                }
                else{
                    document.getElementById("btnIniciarPedido").disabled=false;
                    document.getElementById("btnIniciarPedido").className="iniciarPedido";
                    elemento.className = "mesaJuntando";
                }
                var elemArray = document.getElementsByClassName("mesaJuntando");
                if(elemArray.length == 0)
                {
                    document.getElementById("btnIniciarPedido").disabled=true;
                    document.getElementById("btnIniciarPedido").className="iniciarPedidoDisable";
                }        
            }
        </script>
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>
        <link href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <script src="js/jsp.js"></script>
        <script type='text/javascript' src='../js/funciones.js'></script>
        <script>
            function agregaDetalle(id,nombre,subTotal,accion){
                var x = document.getElementsByName("id_producto");
                var x2 = document.getElementsByName("id_cantidad");
                var x3 = document.getElementsByName("id_precio");
                var x4 = document.getElementsByName("id_subTotal");
                var flag = 0;
                var pos = -1;
                var ultimo = x.length;
                for (var i = 0; i < x.length; i++)
                {
                    if (x[i].value == id) {
                        flag = 1;
                        pos = i;
                    }
                }
                var labelCantidad = 'cantidad'+pos;
                var labelSubTotal = 'subTotal'+pos;
                if(flag == 0){
                    $('#grilla > tbody:last').append('<tr>\n\
                    <td width=21>'+(ultimo+1)+'</td>\n\
                    <td width=165><a onclick="show_popupActualizarProducto('+id+')" href="#">'+nombre+'<input type="hidden" name="id_producto" value="'+id+'"/></a></td>\n\
                    <td width=30><label id="cantidad'+ultimo+'">1</label><input type="hidden" name="id_cantidad" value="1"/></td>\n\
                    <td width=68><label id="subTotal'+ultimo+'">S/ '+subTotal+'</label><input type="hidden" name="id_subTotal" value="'+subTotal+'"/><input type="hidden" name="id_precio" value="'+subTotal+'"/></td>\n\
                    <td width=47 title="Agregar"><button id="'+id+'" class="btnAgregar" onclick="agregaDetalle(id,\'CORVINA SALTEADA A LA CRIOLLA\',\'35\',\'agrega\')">+</button></td>\n\
                    <td width=47 title="Disminuir"><button id="'+id+'" class="btnAgregar" onclick="agregaDetalle(id,\'CORVINA SALTEADA A LA CRIOLLA\',\'35\',\'disminuye\')">-</button></td>\n\
                    <td width="47" title="Quitar"><button class="btnAgregar" onclick="eliminardatos(this);">X</button></td>');
                    actualizaMontoTotal();
                }else{
                    if(accion == 'agrega'){
                        x2[pos].value = parseInt(x2[pos].value)+1;
                        x4[pos].value = parseFloat(x3[pos].value)*parseInt(x2[pos].value);
                    }
                    if(accion == 'disminuye'){
                        if(x2[pos].value > 1){
                            x2[pos].value = parseInt(x2[pos].value)-1;
                            x4[pos].value = parseFloat(x3[pos].value)*parseInt(x2[pos].value);
                        }
                    }
                } 
                $('#'+labelCantidad).text(x2[pos].value);
                $('#'+labelSubTotal).text('S/ '+x4[pos].value);
                actualizaMontoTotal();
            }
            
            function actualizaMontoTotal(){
                var montoTotal = 0;
                var x4 = document.getElementsByName("id_subTotal");
                for (var i = 0; i < x4.length; i++)
                {
                    montoTotal += parseFloat(x4[i].value);
                }
                $('#montoTotal').text('S/ '+montoTotal);
            }
            function eliminardatos(dato) {
                $(dato).parent().parent().remove();
                actualizaMontoTotal();
            }
        </script>
        <script type="text/javascript">


            function loadurl(url, id) {
                var pagecnx = createXMLHttpRequest();
                pagecnx.onreadystatechange = function() {
                    if (pagecnx.readyState == 4 && (pagecnx.status == 200 || window.location.href.indexOf("http") == -1))
                        document.getElementById(id).innerHTML = pagecnx.responseText;
                }
                pagecnx.open('GET', url, true)
                pagecnx.send(null)
            }

            function loadurlkey(e, url, id) {
                tecla = (document.all) ? e.keyCode : e.which;
                if (tecla == 13)
                    loadurl(url, id);
            }

            function createXMLHttpRequest() {
                var xmlHttp = null;
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
                return xmlHttp;
            }

            function startTime()
            {
                today = new Date();
                h = today.getHours();
                m = today.getMinutes();
                s = today.getSeconds();
                m = checkTime(m);
                s = checkTime(s);
                document.getElementById('reloj').innerHTML = h + ":" + m + ":" + s;
                t = setTimeout('startTime()', 500);
            }

            function checkTime(i)
            {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
            window.onload = function() {
                startTime();
            }

            function obtenerMinutos() {
                var d = new Date();
                document.write(d.getDate());
            }
        </script>
        <script type="text/javascript">
            var time;
            var on = false;
            var seconds = 0;
            var minutes = 0;

            var startTime = function() {
                seconds++;
                time = setTimeout("startTime()", 1000);
                if (seconds > 59) {
                    seconds = 0;
                    minutes++;
                }
                document.getElementById("minutes").value = minutes;
                // Mostar segundos
                document.getElementById("seconds").value = seconds;
                // Mostar segundos
            }

            var stopStart = function() {
                document.getElementById("time").innerHTML = !on ? "Stop" : "Start";
                if (!on) {
                    on = true;
                    startTime();
                } else {
                    on = false;
                    clearTimeout(time);
                }
            }
        </script>
        <style>
            .btnAgregar{
                width: 40px;
                height: 40px;
                background: #7cbc0a;
                font-family: sans-serif;
                font-size: 35px;
                text-align: center;
                
            }
            tbody.scrollContent { 
                display: block; /*obligado*/ 
                height: calc(100% - 500px); /*la que necesites*/ 
                overflow: auto; /*obligado*/ 
                width: 100%; 
            }
            
        </style>
    </head>
    <body>
        <div id="mipopup" title="Create new user">
         
        </div>
        <div align="center" class="capaPrincipal">
            <div class="capaIzquierda">
                <div class="capaIzquierdaTop">
                    <div class="tituloDetallePedido">
                        DETALLE DE PEDIDO
                    </div>
                    <div class="cuerpoDetallePedido">
                        <table id="grilla" border="1" class="tableDetallePedido"width="100%" >
                            <thead class="tableHead">
                                <tr>
                                    <th width="21">#</th>
                                    <th width="165">Items</th>
                                    <th width="30">C</th>
                                    <th width="68">S.Tot.</th>
                                    <th colspan="3"  width="147">Opc.</th>
                                </tr>
                            </thead>
                            <tbody class="tableBody">
                                <tr>
<!--                                    <td width="21">1</td>
                                    <? $cod=2;?>
                                    <td width=165>
                                        <a onclick="show_popupActualizarProducto(<?=$cod;?>)" href='#'>
                                            <center>Tallarines <input type="hidden" name="id_producto" value="1"/></center>
                                        </a>
                                    </td>                                     
                                    <td width="30"><label id="cantidad0">3</label><input type="hidden" name="id_cantidad" value="3"/></td>
                                    <td width="68"><label id="subTotal0">S/ 9,118.00</label><input type="hidden" name="id_subTotal" value="9118.00"/><input type="hidden" name="id_precio" value="9118.00"/></td>
                                    <td width="47" title="Agregar"><button class="btnAgregar" onclick="agregaDetalle(id,'<?= $lista[$i]['nombre']?>','<?= $lista[$i]['precio_fijo']?>')">+</button></td>
                                    <td width="47" title="Disminuir"><button class="btnAgregar">-</button></td>
                                    <td width="47" title="Quitar"><button class="btnAgregar" onclick="eliminardatos(this);">X</button></td>-->
                                </tr>  
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="capaIzquierdaBottom">
                    <? for ($i = 0; $i < count($lista); $i++) { 
                            $codigo = $lista[$i]['id_rubro']; ?>
                    <a href="javascript:FAjax('../Pedido/V_SubRubro.php', 'productos', 'codigo=<?= $codigo ?>', 'POST');" >
                    <div class="subRubro">
                        <div class="subRubroTitulo">
                            
                            <img height="60" width="90" src="../images/Rubro/<?= $lista[$i]['imagen']; ?>"/>
                        </div>
                        <div class="subRubroNombre">
                            <?= $lista[$i]['nombre']; ?>
                        </div>
                    </div>
                    </a>
                    <? } ?>
                </div>
            </div>
            <div class="capaDerecha">
                <div class="capaDerechaTop" id="productos">
                    
                </div>
                <div class="capaDerechaBottom">
                    <div class="capaDerechaBottomLeft">
                        <div class="division1">
                            <div class="montoTotal">Monto Total: <label id="montoTotal">S/. 0.00</label></div>
                        </div>
                        <div class="division2">
                            <div class="mesasInvolucradas">
                                <div class="rightImagen"><img src="../images/Pedido/table.png" /></div>
                                <div class="leftDescripcion">
                                    <div class="division1"></div>
                                    <div class="division2">Mesas: 
                                        <? for ($i = 0; $i < count($listaPedGruMes); $i++) { 
                                            echo($listaPedGruMes[$i]['mesa'].' ,');
                                        }
                                        ?>
                                    </div>
                                    <div class="division3"></div>
                                </div>
                            </div>
                            <div class="numeroCubiertos">
                                <div class="rightImagen"><img src="../images/Pedido/cutlery.png" /></div>
                                <div class="leftDescripcion">
                                    <div class="division1"></div>
                                    <div class="division2">Número Cubiertos: <input style="width: 50px" type="number" name="npersonas" value="1" /></div>
                                    <div class="division3"></div>
                                </div>                                
                            </div>
                        </div>
                        <div class="division3">
                            <div class="horaEntrada">Hora Entrada: 10:39:21</div>
                            <div class="tiempoTranscurrido">Tiempo Transcurrido: 50:04:01</div>
                        </div>
                    </div>
                    <div class="capaDerechaBottomRight">
                        <form style="width: 100%; height: 100%" name="formFinalizarPedido" action="#" method="post" >
                            <input type="hidden" name="idPedido" value="<?= $idPedido; ?>" />
                            <style>
                                .btnMenu{
                                    background: #dfeffc url(css/redmond/images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
                                    -webkit-box-shadow: 2px 2px 2px #c5dbec;
                                    -moz-box-shadow: 2px 2px 2px #c5dbec;
                                    border: 1px solid #c5dbec;
                                    height: calc(50% - 3px);
                                    width: calc((100%/3) - 6px);
                                    margin: 1px;
                                    font-weight: bold;
                                    color: #2e6e9e;
                                    cursor: pointer;
                                }
                                .btnMenu:hover{
                                    border: 1px solid #79b7e7;
                                    background: #d0e5f5 url(css/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
                                    font-weight: bold;
                                    color: #1d5987;
                                    -webkit-box-shadow: 2px 2px 2px #c5dbec;
                                    -moz-box-shadow: 2px 2px 2px #c5dbec;
                                    border: 1px solid #c5dbec;
                                    height: calc(50% - 3px);
                                    width: calc((100%/3) - 6px);
                                    margin: 1px;
                                    cursor: pointer;
                                }
                            </style>
                            <button class="btnMenu" onclick = "this.form.action = 'V_Comprobante.php'">Finalizar Pedido</button>
                            <button class="btnMenu" onclick = "this.form.action = '../Cocina/V_Cocina.php'">Enviar a Cocina</button>
                            <button class="btnMenu">Desarcar Pedido</button>
                            <button class="btnMenu" onclick = "this.form.action = 'V_Mosos.php'">Mosos</button>
                            <button class="btnMenu" onclick = "this.form.action = 'V_MesasPorZonaVistaTabla.php'">Mesas</button>
                            <button class="btnMenu" onclick = "this.form.action = '../../Controller/C_Logout.php'">Salir</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>    
<?php
    } else {
    ?>
    <script language="JavaScript" type="text/javascript">
        alert('Su session a expirado, por favor Ingrese Nuevamente');
        location.href = '../View/V_Login.php';
    </script>
    <?php } ?>
    </body>      
</html>
